import { defineConfig } from 'vite';
// import { ViteAliases } from 'vite-aliases';
import MyViteAliases from './plugins/ViteAliases';
// import  { createHtmlPlugin } from 'vite-plugin-html';
import CreateHtmlPlugin from './plugins/CreateHtmlPlugin';
// import { viteMockServe } from 'vite-plugin-mock';
import VitePluginMock from './plugins/VitePluginMock';
import { compression } from 'vite-plugin-compression2' // gzip压缩

export default defineConfig({
  optimizeDeps: {
    exclude: [], // 将指定数组中的依赖不进行依赖预构建
  },
  envPrefix: 'ENV_',
  css: { // 对css的行为进行配置
    modules: { // 是对css模块化的默认行为进行覆盖
      // modules配置最终会丢给postcss modules
      localsConvention: 'camelCase', // 修改生成的配置对象的key的展示形式（驼峰还是中划线）
      scopeBehaviour: 'local', // 配置当前的模块化行为是模块化还是全局化
      // generateScopedName: '[name]_[local]_[hash:5]', 
      // generateScopedName: (name, filename, css) => {
      //   // name代表此刻css文件中的类名
      //   // filename 当前css文件的绝对路径
      //   // css 给的你就是当前的样式
      //   // 配置成函数以后，返回值就决定了他最终显示的类型
      //   return `${name}_${Math.random().toString(36).substring(3, 8)}`
      // }
      hashPrefix: 'hello', // 生成hash的时候根据你的类名 + 一些其他的字符串（文件名 + 内部随机生成的字符串）去生成，如果想要你的hash更加独特一点，可以配置hashPrefix，你的配置的字符串会参与到最终的hash生成
      globalModulePaths: [], // 代表你不想参与到css模块化的路径
    },
    preprocessorOptions: { // key + config key代表预处理器的名
      less: { // 整个的配置对象都会最终给到less的执行参数（全局参数）中去
        // 在webpack里就给less-loader去配置就好了
        math: 'always', // 将数学公式转化为css语法，less3.x版本默认为"always"
        globalVars: { // 全局变量
          mainColor: 'red',
        },
      }
    },
    devSourcemap: true, // 开启css的sourceMap（文件索引）
    // vite的诞生会让postcss再火一次
    // postcss: {
    //   plugins: [postcssPresetEnv()]
    // }
  },
  build: { // 构建生产包时的一些配置策略
    rollupOptions: { // 配置rollup的一些构建策略
      output: { // 控制输出 
        // 在rollup里，hash代表将你的文件名和文件内容进行组合计算得来的结果
        assetFileNames: '[hash].name.[ext]'
      }
    },
    assetsInlineLimit: 4096000, // 4000kb, 小于4000kb的都会转化为base64格式的字符串
    outDir: 'dist', // 配置输出目录
    assetsDir: 'static', // 配置输出目录中的静态资源目录
  },
  plugins: [
    // ViteAliases(),
    MyViteAliases(),
    // createHtmlPlugin({
    //   inject: {
    //     data: {
    //       title: '主页',
    //     }, 
    //   },
    // }),
    CreateHtmlPlugin({
      inject: {
        data: {
          title: '首页'
        }
      }
    }),
    // viteMockServe({
    //   mockPath: 'mock',
    // }),
    VitePluginMock(),
    compression({
      threshold: 1024*1024 // 只有超过1MB才压缩
    }), // gzip压缩
  ]
})